<template>
  <div>
    <ArtPlay
      ref="ArtPlayRef"
      :config="config"
      :split-number="1"
      :url-list="urlList"
      style="width: 100%; height: 100vh"
    ></ArtPlay>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import ArtPlay from '@/components/ArtPlay.vue'

const ArtPlayRef = ref(null)
const config = ref({
  setting: true, //是否开启设置面板
  flip: true, //画面翻转
  playbackRate: true, //播放速度
  disableFull: true,
  aspectRatio: true, //画面比例
  subtitleOffset: true, //画面偏移
  showCustomSettings: true, //是否显示自定义设置属性
  autoplay: true, //自动播放,muted必须true--静音
  muted: false,
  screenshot: true, //截图
  pip: true, //画中画
  mutex: false, //多个播放器支持同时播放,
  highlight: [
    {
      time: 60,
      text: 'One more chance',
    },
    {
      time: 120,
      text: '谁でもいいはずなのに',
    },
    {
      time: 180,
      text: '夏の想い出がまわる',
    },
    {
      time: 240,
      text: 'こんなとこにあるはずもないのに',
    },
    {
      time: 300,
      text: '－－终わり－－',
    },
  ], //文字高亮提示
})
const urlList = reactive([
  {
    live: false,
    videoTitle: '机器xxxxxxxx',
    url: `${location.href}src/assets/video.mp4`,
  },
  // {
  //   isLive: true,
  //   videoTitle: '机器1',
  //   url: 'https://d1--cn-gotcha204-4.bilivideo.com/live-bvc/449235/live_36196453_3658905_minihevc/index.m3u8',
  // },
  {
    isLive: true,
    videoTitle: '机器2',
    url: 'https://cn-sh-ct-01-07.bilivideo.com/live-bvc/581037/live_470619697_63039880_minihevc/index.m3u8',
  },
  {
    isLive: true,
    videoTitle: '机器3',
    url: 'https://d1--cn-gotcha204-2.bilivideo.com/live-bvc/999438/live_630856629_45101235_minihevc/index.m3u8',
  },
  {
    live: false,
    videoTitle: '机器4',
    url: `${location.href}src/assets/video.mp4`,
  },
])
// onMounted(() => {
//   nextTick(() => {
//     urlList.forEach((item, index) => {
//       // ArtPlayRef.value.playList[index]?.artRef?.quality = [
//       //   {
//       //     default: true,
//       //     html: '720P',
//       //     url: '/assets/sample/video.mp4',
//       //   },
//       //   {
//       //     html: '1080P',
//       //     url: '/assets/sample/video.mp4',
//       //   },
//       // ]
//     })
//   })
// })
</script>
